<template>
    <div class="views" :style="styleColor">
        <!-- 商品进出口情况 -->
        <div class="views_top">
            <div class="left">
                <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
                <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
                <span>进出口商品情况</span>
            </div>
            <div class="right">
                <div class="tabBtn" :class="active == 'imp' ?'actived':''" @click="imp">
                    进口
                </div>
                <div class="tabBtn" :class="active == 'exp' ?'actived':''" @click="exp">出口</div>
               
            </div>
        </div>
        <div style="height:185px;overflow:auto" >
            <div class="goodsSituation" id="goodsSituation" ref="goodsSituation" style="width:100%;height:280px;"></div>

        </div>
        
    </div>
</template>

<script>
import { reqFindCustomsCommodityGQ, reqFindCustomsCommoditySH } from '@/api/home/index.js'
import echarts from 'echarts'
import { mapGetters } from 'vuex'
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data(){
        return {
            options: {},
            active:'imp',
            nameList:[],
            numberList:[],
            DW:''
        }
    },
    computed: {
        ...mapGetters(['customCode']),
        transStyle() {
            // console.log('??????????????????', this.objToOne(this.options))
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    watch:{
        customCode(val) {
            // console.log(val);
            if(this.customCode=='22') {
                this.getSHList(this.active)
            }else {
                this.getList(val, this.active)
            }
          

        },
        nameList:{
           
            deep:true,
            handler(val){
                this.setOptions(val, this.numberList,this.DW);
            }
        },
        numberList:{
            deep:true,
            handler(val) {
                this.setOptions(this.nameList, val,this.DW);
            }
        }
    },
    created(){
        if (this.customCode == '' || !this.customCode||this.customCode=='22') {
            this.getSHList('imp')
        } else {
            this.getList(this.customCode,'imp')
        }   
    },
    mounted() {
        this.options = this.value
        this.$nextTick(() => {
            this.initChart();
        });
    },
    methods: {

        async getSHList(type){
            if(type=='imp') {
                const res = await reqFindCustomsCommoditySH({ ieFlag: 'I'})
                const nameList = res.data.map(item => {
                    return item.cname
                })
                const numberList = res.data.map(item => {
                    // console.log(+item.number.slice(0,-2), '22222222222222222');

                    return +item.numberName.slice(0,-1)
                })
                // console.log(nameList, numberList);
                this.nameList = nameList
                this.numberList = numberList
                  if(res.data[0]) {
                      this.DW=res.data[0].numberName.slice(-1)
                }
                // console.log(res);

                this.chart.hideLoading();
            }else {
                const res = await reqFindCustomsCommoditySH({ ieFlag: 'E'})
                const nameList = res.data.map(item => {
                    return item.cname
                })
                const numberList = res.data.map(item => {
                    return +item.numberName.slice(0,-1)
                })
                // console.log(nameList, numberList);
                this.nameList = nameList
                this.numberList = numberList
                  if(res.data[0]) {
                      this.DW=res.data[0].numberName.slice(-1)
                }
                // console.log(res);

                this.chart.hideLoading();
            }
        },
        imp(){
            this.active='imp'
            if (this.customCode == '' || !this.customCode || this.customCode == '22'){
                this.getSHList('imp')
            }else {
                this.getList(this.customCode,'imp')
            }
           
        },
        exp(){
            this.active = 'exp'
            if (this.customCode == '' || !this.customCode||this.customCode=='22') {
                this.getSHList('exp')
            } else {
                this.getList(this.customCode, 'exp')
            }
        },
        async getList(code,type){
            if(type=='imp') {
                const res = await reqFindCustomsCommodityGQ({ ieFlag: 'I', declPort: code })
                const nameList = res.data.map(item => {
                    return item.cname
                })
                const numberList = res.data.map(item => {
                   
                    return +item.numberName.slice(0,-1)
                })
                // console.log(nameList, numberList);
                this.nameList = nameList
                this.numberList = numberList
                  if(res.data[0]) {
                      this.DW=res.data[0].numberName.slice(-1)
                }
                // console.log(res);
               
                this.chart.hideLoading();
            }else {
                const res = await reqFindCustomsCommodityGQ({ ieFlag: 'E', declPort: code })
                const nameList = res.data.map(item => {
                    return item.cname
                })
                const numberList = res.data.map(item => {
                    
                    return +item.numberName.slice(0,-1)
                })
                // console.log(nameList, numberList);
                this.nameList = nameList
                this.numberList = numberList
                if(res.data[0]) {
                      this.DW=res.data[0].numberName.slice(-1)
                }
              
                // console.log(res);
             
                this.chart.hideLoading();
            }
           
        },
        initChart() {
            this.chart = echarts.init(document.getElementById('goodsSituation'), null, { renderer: 'canvas' })
            this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.nameList, this.numberList, this.showError);
        },
        setOptions(aList, bList,DW) {
           
            var data1 = bList
            var titlename = aList
            // var data1 = [990, 980, 960,800,700,600,550,540,530,520];
            // var titlename = [
            //     "棉制连衣裙",
            //     "棉制男士长裤、马裤",
            //     "棉制针织或钩编男士上衣",
            //     "其他棉制针织或钩编的",
            //     "其他棉制开襟衫、马",
            //     "其他卫衣",
            //     "超短裙",
            //     "大衣",
            //     "西装",
            //     "保暖内衣"
            // ];
            var max = Math.max.apply(null, data1);
            var getMax = [];
            for (let i = 0; i < titlename.length; i++) {
                getMax.push(max);
            }
            // console.log(getMax);
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: aList.length>0 || bList.length>0 ,     // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                // backgroundColor: "#fff",
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "none",
                    },
                    formatter: function (params) {
                        return params[0].name + " : " + params[0].value+DW;
                    },
                 
                 
                },
                //图标位置
                grid: {
                    top: '1%',
                    left: "10%",
                    bottom:'0%',
                    containLabel: true
                },
                xAxis: {
                    show: false,
                },
                yAxis: [
                    {
                        show: true,
                        data: titlename,
                        inverse: true,
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#FFF",
                            formatter: (value, index) => {
                               
                                let val = "";
                                if (value.length > 8) {
                                    val = value.substr(0, 8) + '...';
                                   
                                } else {
                                    val=value
                                }
                               if(index>2){
                                   return [`{lg|${index + 1}}  ` + ' ' + "{title|" + val + "} "].join("\n");
                               }else if(index==0) {
                                  
                                   return [`{top|${index + 1}}  ` + ' ' + "{title|" + val + "} "].join("\n");
                               }else if(index==1) {
                                  
                                   return [`{top2|${index + 1}}  ` + ' ' + "{title|" + val + "} "].join("\n");
                               }else if(index==2) {
                                  
                                   return [`{top3|${index + 1}}  ` + ' ' + "{title|" + val + "} "].join("\n");
                               }
                               
                            },
                            rich: {
                                lg: {
                                    // backgroundColor: "#8d7fec",
                                    color: "#fff",
                                    // borderRadius: ,
                                    padding: 2,
                                    align: "center",
                                    width: 20,
                                    height: 15,
                                   
                                },
                                title: {
                                    // backgroundColor: "#8d7fec",
                                    color: "#fff",
                                    width:90,
                                    align: "left",
                                    // borderRadius: 5,
                                    padding: 5,
                                },
                                top :{
                                    color: "#fff",
                                    backgroundColor: "#ff224c",
                                    fontWeight: 700,
                                    borderRadius: 5,
                                    padding: 2,
                                    align: "center",
                                    width: 20,
                                    height: 15,
                                },
                                top2:{
                                    color: "#fff",
                                    backgroundColor: "#ff7500",
                                    fontWeight: 700,
                                    borderRadius: 5,
                                    padding: 2,
                                    align: "center",
                                    width: 20,
                                    height: 15,
                                },
                                top3:{
                                    color: "#fff",
                                    backgroundColor: "#ffb500",
                                    fontWeight: 700,
                                    borderRadius: 5,
                                    padding: 2,
                                    align: "center",
                                    width: 20,
                                    height: 15,
                                }
                            },
                        },
                    },
                    {
                        type: 'category',
                        inverse: true,
                        // offset: 0,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: '#FFF',
                                fontSize: '12'
                            },
                            formatter: function (value, index) {
                                return value + DW
                            }

                        },
                        data: data1,
                        
                    }
                ],
                series: [
                    {
                        name: "条",
                        type: "bar",
                        zlevel: 1,
                        data: data1,
                        barWidth: 10,
                        // barWidth:'50%',
                        
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                //   color: function (params) {
                                //     var num = myColor.length;
                                //     return myColor[params.dataIndex % num];
                                //   },
                                // 渐变色
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#0089ff'
                                }, {
                                    offset: 1,

                                    color: '#00c9ff'
                                }]),
                            },
                        },
                    },
                    {
                        name: "背景",
                        type: "bar",
                        barGap: "-100%",

                        data: getMax,
                        barWidth: 10,

                        itemStyle: {
                            normal: {
                                color: "rgba(24,31,68,1)",
                                barBorderRadius: 0,
                            },
                        },
                    },
                ],
            });
        }
    }

}
</script>

<style lang="scss" scoped>
.views_top {
    height: 40px;
    display: flex;
    .left {
        width: 300px;
        display: flex;
        align-items: center;
        .imgOne {
            width: 35px;
            height: 40px;
        }
        .imgTwo {
            width: 22px;
            height: 21px;
            margin-left: 10px;
        }
        span {
            color: #fff;
            font-size: 16px;
            margin-left: 8px;
        }
    }
    .right {
        flex:1;
        display: flex;
       align-items: center;
       justify-content: center;
       color: rgba(255, 255, 255, 0.53);
        .tabBtn {
            width: 60px;
            height: 25px;
            font-size: 14px;
            border: 1px solid transparent;
            margin-left: 5px;
            line-height: 24px;
            border-radius:5px ;
            cursor: pointer;
        }
        .actived {
            border: 1px solid #00c1ff;
            color: #00c1ff;
        }

    }
}
</style>

